<!--
 * 流程定义
 * @author luguoxiang
 * @date 2025-08-02
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container>
    <lg-table :schema="schema" v-bind="tableProps">
      <!-- 工具栏 -->
      <template #toolbar-left>
        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-add v-if="permits.create" @click="designerRef.open()" />
          <btn-tool-remove v-if="permits.remove" @click="remove()" />
          <btn-tool-export v-if="permits.export" @click="exports" />
          <btn-tool-import v-if="permits.import" @click="imports" />
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <lg-button-list :limit="$RowBtnLimit">
          <btn-row-update v-if="permits.update" @click="designerRef.open(row)" />
          <btn-row-update v-if="permits.deploy" @click="deploy(row)">部署</btn-row-update>
          <btn-row-view v-if="permits.detail" @click="detailRef.open(row)" />
          <btn-row-remove v-if="permits.remove" @click="remove(row.id)" />
        </lg-button-list>
      </template>
      <!-- 插槽 -->
    </lg-table>
    <edit ref="editRef" @ok="reload()" />
    <detail ref="detailRef" />
    <designer ref="designerRef" />
  </table-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { LgButtonList, LgTable, usePermit, useTable } from '@/soar';
import api from './api';
import schema from './schema';
import Edit from './Edit.vue';
import Detail from './Detail.vue';
import Designer from './Designer.vue';

const editRef = ref();
const detailRef = ref();
const designerRef = ref();
const permits = usePermit({
  create: 'create',
  update: 'update',
  remove: 'remove',
  detail: 'detail',
  import: 'import',
  export: 'export',
  deploy: 'deploy',
});

// 使用表格
const { exports, imports, remove, reload, tableProps, handleSingle } = useTable<any>({
  api: {
    query(params: any) {
      delete params.$soarQuery.fields;
      return api.query(params);
    },
  },
  props: {
    orderBys: ['id'],
    actionbar: {
      width: 100,
    },
  },
});

function deploy(row: any) {
  handleSingle('确定部署流程吗？', () => api.deploy(row.id));
}
</script>
